<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <BigHeader />
        <div class="body-box ai-stretch jc-around">
          <div class="left-box d-flex flex-column jc-around">
            <div class="d-flex jc-between ai-stretch" style="height: 44.0909rem; width: 100%;">
              <!-- 实时作业 -->
              <shishizuoye></shishizuoye>
              <div class="d-flex flex-column jc-between" style="width: 39.0909rem; height: 100%;">
                <!-- 主体分类 -->
                <zhutifenlei></zhutifenlei>
                <!-- 工作情况 -->
                <gongzuoqingkuang></gongzuoqingkuang>
              </div>
            </div>
            <!-- 事项统计 -->
            <shixiangtongji></shixiangtongji>
          </div>
          <div class="center-box">
            <!-- 地图 -->
            <bigmap></bigmap>
          </div>
          <div class="right-box d-flex flex-column jc-around">
            <div class="d-flex flex-column jc-between" style="height: 44.0909rem; width: 100%;">
              <div class="d-flex jc-between" style="height: 21.4545rem; width: 100%">
                <!-- 人口分类 -->
                <renkoufenlei></renkoufenlei>
                <!-- 视频 -->
                <bigvedio></bigvedio>
              </div>
              <div class="d-flex jc-between" style="height: 21.4545rem; width: 100%">
                <!-- 人员组成 -->
                <renyuanzucheng></renyuanzucheng>
                <!-- 主体标签 -->
                <zhutibiaoqian></zhutibiaoqian>
              </div>
            </div>
            <!-- 隐患巡查 -->
            <yinhuanxuncha></yinhuanxuncha>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { BigHeader } from '@/views/common'
import * as childComponents from './components'
export default {
  data () {
    return {
      loading: true,
    }
  },
  components: {
    BigHeader,
    shixiangtongji: childComponents.shixiangtongji,
    yinhuanxuncha: childComponents.yinhuanxuncha,
    shishizuoye: childComponents.shishizuoye,
    zhutifenlei: childComponents.zhutifenlei,
    renkoufenlei: childComponents.renkoufenlei,
    gongzuoqingkuang: childComponents.gongzuoqingkuang,
    renyuanzucheng: childComponents.renyuanzucheng,
    zhutibiaoqian: childComponents.zhutibiaoqian,
    bigvedio: childComponents.bigvedio,
    bigmap: childComponents.bigmap,
  },
  mounted () {
    this.cancelLoading()
  },
  methods: {
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
#index{
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  height: 100%;
  .bg {
    padding: 0;
    background-image: url("~@/assets/screen-bg-1.png");
    background-size: cover;
    background-position: center center;
  }
  .host-body{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .body-box{
    width: 100%;
    height: 68.2273rem;
    display: flex;
  }
  .left-box, .center-box, .right-box{
    width: 79.5227rem;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
}
</style>
